function isEmptyElement(c) {
  return !(c.tag || (c.text && c.text.trim() !== ''))
}

function filterEmpty(children = []) {
  return children.filter(c => !isEmptyElement(c))
}
export default {
  props: {
    cols: {
      type: [Number, String],
      default: 2
    }
  },
  inject: {
    demoContext: { default: {} }
  },
  render() {
    const { cols, $slots } = this
    const isSingleCol = cols === 1
    const leftChildren = []
    const rightChildren = []
    const children = filterEmpty($slots.default)
    children.forEach((demo, index) => {
      if (index % 2 === 0 || isSingleCol) {
        leftChildren.push(demo)
      } else {
        rightChildren.push(demo)
      }
    })
    return (
      <el-row gutter={16} style={{ marginTop: '20px' }}>
        <el-col
          span={isSingleCol ? 24 : 12}
          class={isSingleCol ? 'code-boxes-col-1-1' : 'code-boxes-col-2-1'}
        >
          {leftChildren}
        </el-col>
        {isSingleCol
          ? null
          : (
            <el-col class='code-boxes-col-2-1' span={12}>
              {rightChildren}
            </el-col>
          )}
      </el-row>
    )
  }
}
